<template>
	<div class="page">
		<div class="logo">
			<img class="logo-img" src="../assets/userLogo-2.png" alt="" />
			<div class="right-ic" @click="changeLanguage">
				<img src="../assets/100-1.png" alt="" />
				<span>{{$i18n.locale == 'zh' ? 'EN' : '中文'}}</span>
			</div>
		</div>
		<div class="top" v-if="type !== 4">
			<div class="top-title">{{$t('language.text77')}}</div>
			<div class="top-progress-box">
				<div class="top-progress" v-if="progressWidth != 0" :style="{ width: progressWidth }">
					<span>{{progressWidth}}</span>
					<img class="top-progress-ic" src="../assets/125.png">
				</div>
			</div>
			<div class="top-num">{{$t('language.text79')}}:<span class="num">{{goalNum}}</span></div>
			<div class="top-num" style="margin-top: 2px;">{{$t('language.text78')}}:<span class="num">{{activeNum}}</span></div>
		</div>
		<div class="content">
			<div class="card">
				<div class="user">
					<div class="select">
						<img class="ic" src="../assets/124.png" alt="" />
					</div>
					<div class="user-name">
						<div class="search">
							<span @click="startDate">{{start_date || $t('language.text82')}}</span>
							<img class="ic" src="../assets/120.png" alt="" /> - 
							<span @click="endDate">{{end_date || $t('language.text83')}}</span>
							<img class="ic" src="../assets/120.png" alt="" />
						</div>
						{{$t('language.text49')}}
					</div>
					
					<div class="user-btn" @click="tapExcel">
						{{$t('language.text50')}}
					</div>
				</div>
			</div>
		</div>
		
		<div class="add-btn">
			<div class="btn" @click="goPage('customer')">
				<img src="../assets/tab-2.png" alt="" />
				<span>{{type == 2 ? $t('language.text34') : $t('language.text85')}}</span>
			</div>
			<div class="btn" @click="goPage('sell')">
				<img src="../assets/tab-1.png" alt="" />
				<span>{{$t('language.text33')}}</span>
			</div>
			<!-- <div class="btn" @click="goPage('assign')">
				<img src="../assets/tab-3.png" alt="" />
				<span>{{$t('language.text35')}}</span>
			</div> -->
			<div class="btn" @click="goPage('check')">
				<img src="../assets/tab-4.png" alt="" />
				<span>{{$t('language.text36')}}</span>
				<div class="count" v-if="count > 0">
					<span>{{count > 9 ? 9 : count}}</span>
					<span v-if="count > 9" class="add-ic">+</span>
				</div>
			</div>
			<div class="btn select">
				<img src="../assets/tab-selcet-5.png" alt="" />
				<span>{{$t('language.text37')}}</span>
			</div>
		</div>
		
		<!-- <van-popup class="maill" v-model="showPopup">
			<img class="popup-ic" src="../assets/115.png" alt="" />
			<div class="popup-title">发送邮件</div>
			<div class="popup-cue">系统将会发送ZIP压缩包和密码到您的邮箱，请您确认好邮箱地址和报表密码。</div>
			<van-field v-model="text" placeholder="请输入邮箱地址" />
			<van-field v-model="text" placeholder="请输入报表密码" />
			<div class="popup-btn">
				<div class="btn">发送</div>
				<div class="btn back">返回</div>
			</div>
		</van-popup> -->
		
		<van-popup v-model="showPopup" position='bottom'>
			<van-datetime-picker :confirm-button-text="$t('language.text52')" :cancel-button-text="$t('language.text53')" v-model="currentDate" type="year-month" @confirm="dateConfirm" @cancel="showPopup = !showPopup" :min-date="minDate" :max-date="maxDate" />
		</van-popup>
	</div>
</template>
<script>
	import {
		verifyCount,
		excelExport,
		targetInfo,
		beExcelExport
	} from '@/api/user';
	
	import {
		Toast
	} from "vant";
	let timer = null

	export default {
		name: 'Forms',
		data: function() {
			return {
				locale: 'zh',
				start_date: '',
				end_date: '',
				list: '',
				text: '',
				type: 2,
				notTap: false,
				start_year: '',
				start_month: '',
				end_year: '',
				end_month: '',
				minDate: new Date(1999, 0, 1),
				maxDate: new Date(),
				currentDate: new Date(),
				showPopup: false,
				count: 0,
				progressWidth: 0,
				goalNum: 0,
				activeNum: 0,
				status: 1
			};
		},
		created() {
			const userinfo = localStorage.getItem("userinfo")
			const {
				type
			} = JSON.parse(userinfo)
			this.type = type
			if(type !== 4) {
				this.getTargetInfo()
			}
			this.getVerifyCount()
		},
		mounted() {},
		methods: {
			tapExcel() {
				const t = this
				if(t.start_date == '' || t.end_date == '') return Toast(t.$i18n.tc('language.text80'))
				if(t.notTap) return
				t.notTap = true
				timer = setTimeout(()=>{
					t.notTap = false
					clearTimeout(timer)
					timer = null
				},1000)
				Toast.loading({
					forbidClick: true,
					duration: 0
				});
	
				if(t.type !== 4) {
					excelExport({
						start_year: this.start_year,
						start_month: this.start_month,
						end_year: this.end_year,
						end_month: this.end_month
					}).then((res) => {
						Toast.clear();
						if (res.status_code != 200) {
							Toast(res.message)
						} else {
							Toast(t.$i18n.tc('language.text81'))
						}
					}).catch((err) => {
						Toast.clear();
						console.log(err)
					})
					return
				}
				beExcelExport({
					start_year: this.start_year,
					start_month: this.start_month,
					end_year: this.end_year,
					end_month: this.end_month
				}).then((res) => {
					Toast.clear();
					if (res.status_code != 200) {
						Toast(res.message)
					} else {
						Toast(t.$i18n.tc('language.text81'))
					}
				}).catch((err) => {
					Toast.clear();
					console.log(err)
				})
			},
			goPage(page, id) {
				this.$router.push({
					path: page,
					query: {
						id
					}
				})
			},
			startDate() {
				this.status = 1
				this.minDate = new Date(1999, 0, 1)
				this.showPopup = !this.showPopup
			},  
			endDate() {
				this.status = 2
				this.minDate = new Date(this.start_year, this.start_month-1, 1)
				this.showPopup = !this.showPopup
			},
			dateConfirm(date) {
				if(this.status == 1) {
					this.start_date = this.formatDate(date)
				} else {
					this.end_date = this.formatDate(date)
				}
				this.showPopup = !this.showPopup
			},
			formatDate(date) {
				let _year = date.getFullYear()
				let _month = date.getMonth() + 1
				
				if(this.status == 1) {
					this.start_year = _year
					this.start_month = _month
				} else {
					this.end_year = _year
					this.end_month = _month
				}
				return `${_year}-${_month}`;
			},
			getTargetInfo() {
				targetInfo().then((res) => {
					const { percentage, goal_num, active_num} = res.data
					this.progressWidth = percentage
					this.goalNum = goal_num
					this.activeNum = active_num
				}).catch((err) => {
					console.log(err)
				})
			},
			getVerifyCount() {
				verifyCount().then((res) => {
					this.count = res.data
				}).catch((err) => {
					console.log(err)
				})
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					this.$cookies.set('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					this.$cookies.set('locale', 'zh')
				}
			}
		}
	};
</script>
<style type="text/css" lang="scss" scoped>
	.page {
		background-color: #f2f5f7;
	}

	.logo {
		background-color: #fff;

		.tab-app {
			display: flex;
			align-items: center;
			font-size: 24px;
			color: #333333;
			img {
				width: 31px;
				height: 30px;
				margin-right: 6px;
			}
		}

		.right-ic {
			color: #333333;
		}
	}
	
	.top {
		margin: 24px 30px 0;
		padding: 30px;
		box-sizing: border-box;
		border-radius: 10px;
		background-color: #FFFFFF;
		
		.top-title {
			font-size: 30px;
			color: #000000;
			padding-bottom: 30px;
		}
		
		.top-progress-box {
			height: 26px;
			border-radius: 14px;
			background-color: #f1e0ca;
			
			.top-progress {
				min-width: 2%;
				max-width: calc(100% - 12px);
				height: 100%;
				border-radius: 14px 0 0 14px;
				background: linear-gradient(90deg, #ed9e15, #e8542c);
				position: relative;
				
				span {
					position: absolute;
					top: 50%;
					left: 10px;
					transform: translateY(-50%) scale(0.8);
					font-size: 12px;
					color: #fff;
				}
			}
		}
		
		.top-progress-ic {
			width: 30px;
			height: 30px;
			position: absolute;
			top: 50%;
			right: -12px;
			transform: translateY(-50%);
		}
		
		.top-num {
			font-size: 24px;
			color: #666666;
			margin-top: 40px;
			
			.num {
				color: #e8542c;
			}
		}
	}
	

	.content {
		padding-bottom: 80px;

		.card {
			margin: 24px 30px 0;
			padding: 30px;
			box-sizing: border-box;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0 0 24px #eee;
			position: relative;

			.user {
				display: flex;
				justify-content: space-between;
				width: 100%;
				position: relative;
				
				.select {
					position: absolute;
					top: 0;
					left: 0;
					width: 47px;
					height: 46px;
					.ic {
						width: 100%;
						height: auto;
					}
				}
				
				.user-name {
					color: #333333;
					margin-left: 62px;
					font-size: 28px;
					font-weight: bold;
					margin-bottom: 20px;
					
					.search {
						min-height: 40px;
					}
						
					.ic {
						width: 18px;
						height: 14px;
						margin-left: 4px;
						flex-shrink: 0;
					}
				}

				.user-btn {
					flex-shrink: 0;
					margin-left: 24px;
					height: 60px;
					line-height: 60px;
					padding: 0 24px;
					text-align: center;
					color: #fff;
					background: #1F4456;
					border-radius: 8px;
					font-size: 24px;
					font-weight: 500;
					position: relative;
					top: 4px;
				}
			}
		}
	}

	.add-btn {
		position: fixed;
		left: 50%;
		bottom: 0;
		z-index: 10000;
		transform: translateX(-50%);
		width: 100%;
		height: 114px;
		max-width: 750px !important;
		color: #fff;
		font-size: 28px;
		background-color: #fff;
		box-shadow: 0 2px 24px #eee;
		padding: 14px 30px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		.btn {
			color: #999999;
			font-size: 24px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			max-width: 18%;
			margin: 0 12px;
			height: 100%;
			position: relative;
			
			&.select {
				color: #1f4456;
			}
			
			.count {
				position: absolute;
				top: -10px;
				right: 0;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				line-height: 44px;
				text-align: center;
				font-size: 22px;
				color: #FFFFFF;
				background-color: #E8542C;
				.add-ic {
					font-size: 20px;
					position: relative;
					top: -8px;
				}
			}
			
			img {
				width: 38px;
				height: 38px;
				margin-bottom: 8px;
				object-fit: contain;
			}
		}
	}
	

	.van-popup.maill {
		width: 80%;
		padding: 80px 58px;
		border-radius: 10px;
		box-sizing: border-box;
		overflow: initial;
	
		.popup-ic {
			width: 120px;
			height: 120px;
			position: absolute;
			top: -60px;
			left: 50%;
			transform: translateX(-50%);
		}
	
		.popup-title {
			font-size: 36px;
			color: #0A0204;
			margin-bottom: 30px;
			font-weight: 800;
			text-align: center;
		}
		
		.popup-cue {
			font-size: 22px;
			color: #666666;
			margin-top: 30px;
			margin-bottom: 30px;
			text-align: center;
		}
		
		.van-field {
			width: 100%;
			border: 1px solid #EEEEEE;
			font-size: 24px;
			color: #666666;
			border-radius: 10px;
			padding: 24px 15px;
			box-sizing: border-box;
			margin-top: 24px;
		}
	
		.popup-btn {
			.btn {
				margin-top: 24px;
				width: 100%;
				height: 72px;
				line-height: 72px;
				text-align: center;
				background: #1F4456;
				border-radius: 10px;
				font-size: 24px;
				font-weight: bold;
				color: #FFFFFF;
				&.back {
					background: #FFFFFF;
					border: 2px solid #1F4456;
					border-radius: 10px;
					color: #1F4456;
				}
			}
		}
	}
</style>